<template>
  <a-page-header
    style="border: 1px solid rgb(235, 237, 240)"
    title="用户注册"
  />
  <a-steps
    progress-dot
    :current="stepCurrent"
    size="small"
    style="margin-top: 30px; margin-left: 240px; width: 1000px"
  >
    <a-step title="用户注册信息" />
    <a-step title="完善邮箱验证" />
    <a-step title="注册完成" />
  </a-steps>
  <div>
    <a-form :model="user" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item
        label="邮箱"
        has-feedback
        :validateStatus="type1"
        :help="message1"
      >
        <a-input
          v-model:value="user.email"
          placeholder="请输入用户邮箱"
          @change="checkEmail"
        />
      </a-form-item>
      <a-form-item
        label="验证码"
        has-feedback
        :validate-status="type2"
        :help="message2"
      >
        <a-input
          v-model:value="user.userCode"
          @change="checkCode"
          placeholder="请输入6位验证码"
        />
      </a-form-item>
    </a-form>
  </div>

   <a-button
   style="margin-left: 400px"
   id="mailButton"
   :disabled="buttonStatus1"
   @click="sendmail();f()"
   >点击发送验证码</a-button>
    <a-button
    :disabled="buttonStatus2"
    style="margin-left: 230px"
    @click="registerOk"
    >完成注册</a-button
     >
</template>
<script setup>
///////////////////////////////////////////////////////////引入
import { reactive, ref } from "vue";
import { post, setLocalToken } from "@/common";
import { useRouter } from "vue-router";
import { get } from "@/common";
import { message } from "ant-design-vue";
////////////////////////////////////////////////////////////变量
const user = reactive({
  user_id: "",
  userCode:"",
  email:"",
});
const type1 = ref("");
const message1 = ref("");

const type2 = ref("");
const message2 = ref("");

const labelCol = {
  span: 4,
};
const wrapperCol = {
  span: 14,
};

const buttonStatus2=ref(true);
const buttonStatus1=ref(true);

const stepCurrent=ref(1);

const router = useRouter();

var wait = 60;
/////////////////////////////////////////////////////////////
const f =()=>{
   time(document.getElementById("mailButton"));
}

const time=(obj)=> {
    if (wait === 0) {
        obj.removeAttribute("disabled");
        obj.innerHTML = "获取验证码";
        wait = 60;
    } else {
        obj.setAttribute("disabled", true);
        obj.innerHTML = wait + "秒后重新发送";
        wait--;
        setTimeout(function () {
                time(obj)
            },
            1000)
    }
}

const getId=()=>{
   user.user_id=localStorage.getItem("user_id");
}
getId();
const checkEmail=()=>{
   if(user.email.indexOf("@") != -1 && (user.email.indexOf(".com") != -1 || user.email.indexOf(".cn") != -1)){
      type1.value = "success";
      message1.value = "";
      buttonStatus1.value=false;
   }else{
      type1.value = "error";
      message1.value = "请输入正确的邮箱";
      buttonStatus1.value=true;
   }
};

const checkCode=()=>{
   if(user.userCode.length == 6){
      type2.value = "success";
      message2.value = "";
      buttonStatus2.value=false;
   }else{
      type2.value = "error";
      message2.value = "请输入长度正确的验证码";
      buttonStatus2.value=true;
   }
}

const sendmail=()=>{
   post("/security/register/sendmail",user).then((res)=>{
       if(res.success){
            message.success(res.message);
        }else{
            message.error(res.message);
        }
   })
}

const registerOk=()=>{
   post("/security/register/registerOk",user).then((res)=>{
       if(res.success){
            message.success(res.message);
            router.push({path:'/'})
        }else{
            message.error(res.message);
        }
   })
}
</script>

<style>

</style>